<template>
    <div class="main-afrat"> 
        <div class="crumbs-box">
          <crumbs oneNav='研科协' :twoNav='twoNav' :rightFlag='false'></crumbs>
        </div>
        <div class="content-box w1200" >
            <div class="tabs-box">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="部门设置" name="first">
                    </el-tab-pane>
                    <el-tab-pane label="部门介绍" name="second">
                    </el-tab-pane>
                    <el-tab-pane label="现任成员" name="third">
                    </el-tab-pane>
                </el-tabs>
            </div>
            <div>
                <baseTransition>
                    <template v-if='activeName=="first"'>
                        <keep-alive>
                            <setup ></setup>
                        </keep-alive>
                    </template>
                    <template v-if='activeName=="second"'>
                        <keep-alive>
                            <present ></present>
                        </keep-alive>
                    </template>
                    <template v-if='activeName=="third"'>
                        <keep-alive>
                        <member ></member>
                        </keep-alive>
                    </template>
                </baseTransition>
            </div>
        </div>
    </div>
</template>
<script>
import crumbs from '../common/crumbs'
import setup from './setup.vue'
import present from './present.vue'
import member from './member.vue'
import baseTransition from '../base/baseTransition.vue'
export default {
    components:{crumbs,setup,present,member,baseTransition},
    data() {
      return {
        activeName: 'first',
        twoNav:'部门设置',
        allDataList:[],
        articleType:this.$route.query.articleType||'6'
      };
    },
    mounted() {
        this.getmenu()
    },
    methods: {
        handleClick(tab, event) {
            this.twoNav=tab.label
        },
        async getmenu(){
            let {data:res} = await this.API.list({articleType:this.articleType})
            this.allDataList = res
        },
    },
}
</script>
<style lang="scss" >
    .main-afrat{
        // margin-top: 440px;
        position: relative;
        // min-height:500px;
        overflow: hidden;
        margin-bottom: 30px;
        .tabs-box{
            position: absolute;
            top: 0;
            right: 0;
            transform: translateX(-94%);
            // margin-top: -59px;
        }
        .el-tabs__nav{
            float: right;
        }
        .el-tabs__item {
            padding: 0 20px;
            height: 59px;
            line-height: 59px;
            font-size: 16px;
        }
        .el-tabs__nav-wrap::after {
            background-color: transparent !important;
        }
        .el-tabs__item:hover,
        .el-tabs__item.is-active,
        .el-tabs__active-bar{
            color: #3246c4;
        }
        .el-tabs__active-bar{
            background-color: #3246c4;
        }
        .el-tabs__content{
            overflow: inherit;
        }
    }   
    
</style>


